<template>
    <div class="home">
        <div>
            <a-button type="primary">Click me</a-button>
            <a-date-picker v-model="currentTime" />
            <a-tag>未做keep-alive</a-tag>
        </div>
        <div class="table">
            <a-table :columns="columns" :data-source="data">
                <a slot="name" slot-scope="text">{{ text }}</a>
                <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
                <span slot="action" slot-scope="text, record">
                    <a>Invite 一 {{ record.name }}</a>
                    <a-divider type="vertical" />
                    <a>Delete</a>
                    <a-divider type="vertical" />
                    <a class="ant-dropdown-link">
                        More actions <a-icon type="down" />
                    </a>
                </span>
            </a-table>
        </div>
    </div>
</template>

<script>
export default {
    name: "home",
    data() {
        return {
            currentTime: null,
            columns: [
                {
                    dataIndex: "name",
                    key: "name",
                    slots: { title: "customTitle" },
                    scopedSlots: { customRender: "name" },
                },
                {
                    title: "Age",
                    dataIndex: "age",
                    key: "age",
                },
                {
                    title: "Address",
                    dataIndex: "address",
                    key: "address",
                },
                {
                    title: "Action",
                    key: "action",
                    scopedSlots: { customRender: "action" },
                },
            ],
            data: [
                {
                    key: "1",
                    name: "John Brown",
                    age: 32,
                    address: "New York No. 1 Lake Park",
                    tags: ["nice", "developer"],
                },
                {
                    key: "2",
                    name: "Jim Green",
                    age: 42,
                    address: "London No. 1 Lake Park",
                    tags: ["loser"],
                },
                {
                    key: "3",
                    name: "Joe Black",
                    age: 32,
                    address: "Sidney No. 1 Lake Park",
                    tags: ["cool", "teacher"],
                },
            ],
        };
    },
    components: {},
    mounted() {
        this.getCurrentTime();
    },
    methods: {
        getCurrentTime() {
            const time = new Date();
            const year = time.getFullYear();
            const month = (time.getMonth() + 1).toString().padStart(2, "0");
            const day = time.getDate().toString().padStart(2, "0");
            const str = `${year}-${month}-${day}`;
            this.currentTime = str;
        },
    },
};
</script>

<style lang="less" scoped>
.home {
    .ant-calendar-picker {
        margin: 0 10px;
    }
    .ant-tag {
        height: 32px;
        line-height: 32px;
    }
    .table {
        margin-top: 10px;
    }
}
</style>
